<template>
	<a :href="hrefCoumpted" :class="classes" class="wind-link" @click="onLinkClick">
		<w-icon v-if="icon" :type="icon" class="wind-link-icon"></w-icon>
		<span>
			<slot></slot>
		</span>
	</a>
</template>
<script>
/**
 * link by shang 2020/8/4
 * @desc link 文件上传插件
 * @params [String] href 跳转地址
 * @params [String] type 类型 primary, danger
 * @params [Boolean] stop 阻止冒泡
 * @params [Boolean] disabled 禁用
 */
export default {
	name: 'windLink',
	props: {
		href: String,
		type: {
			type: String,
			default: 'primary'
		},
		stop: Boolean,
		disabled: Boolean,
		icon: String
	},
	computed: {
		hrefCoumpted () {
			return this.href ? this.href : 'javascript:void(0);'
		},
		classes () {
			return [`wind-link-${this.type}`]
		}
	},
	methods: {
		onLinkClick () {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click')
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '../../style/varsty.styl'
.wind-link {
	font-size: 12px
	padding: 0 5px
	.wind-link-icon {
		width: 16px
		height: 16px
		margin-right: 4px
		position: relative;
		top: 3px;
	}
	&-primary {
		color:$wind-link-color-primary
		&:hover {
			color:$wind-link-color-primary
		}
	}
	&-danger {
		color:$wind-link-color-danger
		&:hover {
			color:$wind-link-color-danger
		}
	}
}
</style>
